<template>
  <el-dialog
    title="修改学生状态"
    v-model="visible"
    width="400px"
    :close-on-click-modal="false"
    @closed="handleClosed"
  >
    <el-form 
      ref="formRef" 
      :model="form" 
      :rules="rules" 
      label-width="80px"
    >
      <el-form-item label="学生">
        <el-input :value="form.studentName + ' (' + form.studentId + ')'" readonly></el-input>
      </el-form-item>
      
      <el-form-item label="当前状态">
        <el-input :value="form.currentStatusName" readonly></el-input>
      </el-form-item>
      
      <el-form-item label="新状态" prop="newStatusId">
        <el-select 
          v-model="form.newStatusId" 
          placeholder="选择新状态" 
          style="width: 100%;"
        >
          <el-option 
            v-for="status in studentStatuses" 
            :key="status.id" 
            :label="status.name" 
            :value="status.id">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { ref, reactive, watch, nextTick } from 'vue'

export default {
  name: 'StudentStatusDialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    student: {
      type: Object,
      default: null
    },
    studentStatuses: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'submit', 'cancel'],
  setup(props, { emit }) {
    const formRef = ref(null)
    const visible = ref(false)
    
    const form = reactive({
      studentId: null,
      studentName: '',
      currentStatusName: '',
      newStatusId: ''
    })

    // 表单验证规则
    const rules = {
      newStatusId: [
        { required: true, message: '请选择新状态', trigger: 'change' }
      ]
    }

    // 监听visible变化
    watch(() => props.modelValue, (newValue) => {
      visible.value = newValue
    })

    watch(visible, (newValue) => {
      emit('update:modelValue', newValue)
    })

    // 监听学生数据变化
    watch(() => props.student, (newStudent) => {
      if (newStudent) {
        const currentStatus = props.studentStatuses.find(status => status.id === newStudent.statusId)
        
        form.studentId = newStudent.id
        form.studentName = newStudent.name
        form.currentStatusName = currentStatus ? currentStatus.name : '未知'
        form.newStatusId = ''
      }

      // 清除验证错误
      nextTick(() => {
        formRef.value && formRef.value.clearValidate()
      })
    }, { immediate: true })

    const handleSubmit = () => {
      if (!formRef.value) return
      
      formRef.value.validate((valid) => {
        if (valid) {
          emit('submit', {
            studentId: form.studentId,
            statusId: form.newStatusId
          })
        }
      })
    }

    const handleCancel = () => {
      visible.value = false
    }

    const handleClosed = () => {
      // 重置表单
      formRef.value && formRef.value.resetFields()
    }

    return {
      formRef,
      visible,
      form,
      rules,
      handleSubmit,
      handleCancel,
      handleClosed
    }
  }
}
</script>

<style scoped>
/* 组件样式 */
</style>